import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import { Toast } from "vant";

Vue.use(Toast);
// import Vue from 'vue';
// 引入vant ui 的组件库
import Vant from "vant";
// 引入对应的css
import "vant/lib/index.css";
// 注册组件
Vue.use(Vant);

import axios from "axios";

axios.defaults.baseURL = "http://127.0.0.1:3000";

axios.interceptors.request.use((config) => {
  // 判断如果本地储存有 token 但是请求配置没有, 就要加上
  if (localStorage.getItem("token") && !config.headers.Authorization) {
    config.headers.Authorization = "Bearer " + localStorage.getItem("token");
  }

  // 跟响应拦截器一样, 拦住了就必须 return 放行
  return config;
});

axios.interceptors.response.use((res) => {
  // 这个函数可以拦截所有请求的响应
  console.log("发送了请求");

  const { statusCode, message } = res.data;
  console.log(statusCode);
  console.log(message);
  console.log(res.data);

  if (message == "用户信息验证失败") {
    // 处理错误，在入口文件如果想要使用 vant ui 弹出窗口、
    // 这里没有 this 也没有 $toast
    // 可以使用单独引入的方式，只使用 Toast
    Toast.fail("用户信息校验失败，重新登录");
    localStorage.removeItem("token");
    localStorage.removeItem("userId");
    router.replace("/login");
  }

  return res;
});
// 注册到vue原型上 使 $axios 可用
Vue.prototype.$axios = axios;

// 路由守卫

router.beforeEach((to, from, next) => {
  // 是否有token
  if (to.name == "personalPage") {
    const hasToken = localStorage.getItem("token");

    if (hasToken) {
      console.log("没触发");

      next();
    } else {
      console.log("触发了");
      // 没有token则跳转到登录页
      router.push("/login");
    }
  } else {
    next();
  }

  // 是否是个人中心页
});

Vue.filter("fixImgUrl", function(url) {
  const fullUrlReg = /^http/;
  if (fullUrlReg.test(url)) {
    return url;
  } else {
    return axios.defaults.baseURL + url;
  }
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: function(h) {
    return h(App);
  },
}).$mount("#app");
